<p class="Head1"><help:link Id="66057">Creating a Homepage</help:link></p>
<p class="Paragraph">Here, you'll see how to create your homepage for the Internet and make it graphically interesting with the aid of various <help:productname>%PRODUCTNAME</help:productname> components. To conclude, your homepage will be put onto the Internet via your provider and registered with the search engines.</p>
<p class="Paragraph">You must follow some basic steps to make your homepage available to the Internet.</p>
<ul class="L1">
<li class="">
<p style="">Create the Web page(s) in <help:productname>%PRODUCTNAME</help:productname>.</p>
</li>
<li class="">
<p style="">Create or search for the graphic objects you want to include on the page and save all graphics as files in a directory. It is best to use the directory where your HTML text files are also located or a subdirectory of thereof. You should also save graphics taken from the Gallery in an extra file.</p>
</li>
<li class="">
<p style="">Insert the graphic elements as links in the <help:productname>%PRODUCTNAME</help:productname> text documents.</p>
</li>
<li class="">
<p style="">Test how Web pages appear and work in the different Web browsers.</p>
</li>
<li class="">
<p style="">Load the Web pages to your homepage space with your Internet Service Provider.</p>
</li>
</ul>
<p class="Paragraph">So that you do not start with a blank page when creating Web pages, <help:productname>%PRODUCTNAME</help:productname> has interactive help for creating homepages that you can use as a good starting point for your own Web pages.</p>
<p class="Head2"><help:key-word value="homepages; creating" tag="kw66057_1"/>Designing a Homepage Using <help:productname>%PRODUCTNAME</help:productname></p>
<ul class="L2">
<li class="">
<p style="">Use the AutoPilot to create a homepage. It offers you interactive help; the individual steps are explained under <help:link Id="66090"><span style="font-weight:bold;">File - AutoPilot</span></help:link>.</p>
</li>
<li class="">
<p style="">Give your HTML pages a title. This title will appear in the Title bar of Web browsers if your page is displayed, and will also be included as a bookmark. You can enter the title of your pages via <span style="font-weight:bold;">File - Properties - Description</span> in the <span style="font-weight:bold;">Title</span> field of this <text:s text:c="" xmlns:text="http://openoffice.org/2000/text"/>dialog.</p>
</li>
</ul>
<ul class="L3">
<li class="">
<p style="">Save this HTML page as an HTML file in a directory where you store your Web pages. For example, you could store them in "C:\Homepage".</p>
<p class="Paragraph">In this directory, you can store all your Web pages and later upload them to your Internet Service Provider.</p>
<ul class="L4">
<li class="">
<p style="">Enter the name "Start.htm" or "Index.htm". Ask your provider if the first (Start) page of your homepage should have a specific name, so that your homepage is automatically loaded when browsing it without entering any page specification.</p>
</li>
<li class="">
<p style="">Now check if the URL's have been stored on your pages in the file system with the relative path details. This is important so that the links to other elements of your homepage function in each directory and on each drive. To do this mark the <span style="font-weight:bold;">in file system</span> field in the area <span style="font-weight:bold;">URLs relative save</span> on the <span style="font-weight:bold;">Tools - Options - Load/Save - General</span> tab page.</p>
</li>
</ul>
<p class="Head2"><help:key-word value="homepage; folder structure" tag="kw66057_9"/>Directory Structure of the Homepage</p>
<p class="Paragraph">By using the AutoPilot, you can insert graphics problem-free into your Web page from your Internet service provider's (ISP) server.</p>
<ul class="L5">
<li class="">
<p style="">Create a folder on your hard disk for your homepage. Name it, for example, "homepage". It should correspond to the start directory of your homepage on the server of your provider, i.e., save your HTML start file there. This file is usually called "index.htm".</p>
</li>
<li class="">
<p style="">Copy all graphics into a subdirectory of the homepage directory. Name the subdirectory, e.g., "graphics". (It is a good idea to enter all file and folder names in lowercase, since some servers differentiate between uppercase and lowercase letters, i.e. case sensitive, in file and folder names.)</p>
</li>
<li class="">
<p style="">Create a subdirectory called "graphics" in the space reserved for your homepage on the server of your Internet service provider.</p>
</li>
<li class="">
<p style="">Only make references on your HTML pages to graphics that are stored in your "graphics" subdirectory in which you have integrated references of type <IMG SRC="graphics/picture1.gif">. This assumes that all graphics were inserted <span style="font-weight:bold;">as links</span>, and that you had already converted all graphics into GIF or JPG format. In fact, <help:productname>%PRODUCTNAME</help:productname> can automatically convert embedded graphics to GIF files and insert their corresponding tags into HTML pages, but you have no control over the file names. In this case, several graphics can be embedded, but several files will also be created.</p>
</li>
<li class="">
<p style="">Test your homepage locally. If everything works, upload the HTML pages from "Homepage" to your homepage storage space with your ISP, and upload all graphics from the local "graphics" folder to the "graphics" folder on the server.</p>
</li>
</ul>
<p class="Head2"><help:key-word value="homepages; inserting graphics" tag="kw66057_8"/><help:key-word value="graphics; inserting in HTML pages" tag="kw66057_7"/>Integrating Graphics in Homepages</p>
<p class="Paragraph">When working on your homepage, it makes sense, as long as you didn't start with a <help:productname>%PRODUCTNAME</help:productname> Writer/Web Document, to activate the <help:link Id="67683">Online Layout</help:link>. You can then only choose commands that call up the page items allowed in HTML mode. The Online Layout command is found in the <span style="font-weight:bold;">View</span> menu.</p>
<p class="Paragraph">Graphics on the Internet must be in GIF or JPG (or PNG) format. For example, you can open a PCX file and then save the images in JPG format in your homepage directory. Integrated graphics in other formats would be converted into JPG format by <help:productname>%PRODUCTNAME</help:productname> automatically when exported as HTML documents and are often given meaningless names. Thus, in order to have a well-structured and manageable homepage it is better to carry out the conversion to GIF or JPG yourself.</p>
<ul class="L6">
<li class="">
<p style="">Open <help:productname>%PRODUCTNAME</help:productname> and load graphics.</p>
</li>
<li class="">
<p style="">Save the graphic using <span style="font-weight:bold;">File-Save As</span> in either GIF or JPG file format preferably in a subdirectory of C:\Homepage (see above).</p>
<p style="">Next, place the cursor on your homepage where you want to insert the graphic image.</p>
</li>
<li class="">
<p style="">Select a JPG graphic using the <span style="font-weight:bold;">Insert-Picture-From File </span><text:s text:c="" xmlns:text="http://openoffice.org/2000/text"/>command for the Homepage directory and select <span style="font-weight:bold;">Link</span>.</p>
</li>
<li class="">
<p style="">The graphic image will be inserted once you press the <span style="font-weight:bold;">Open</span> button.</p>
</li>
</ul>
<p class="Paragraph">If you want to further edit the graphic image, e.g. enlarge it, you should change the size of the it in program that originally created it. Otherwise there could be certain unwanted effects ("jagged" effect when enlarging, thin lines disappearing when minimizing).</p>
<p class="Head2"><help:key-word value="homepage; background of" tag="kw66057_6"/><help:key-word value="background; of homepage" tag="kw66057_5"/>Changing the Homepage Background</p>
<ul class="L7">
<li class="">
<p style="">Click in a free area of the page so that the picture is no longer selected.</p>
<p style="">In the list box <span style="font-weight:bold;">As</span> select <span style="font-weight:bold;">Color</span>.</p>
</li>
<li class="">
<p style="">Select another background color and click <span style="font-weight:bold;">OK</span>.</p>
</li>
</ul>
<p class="Paragraph">If you select <span style="font-weight:bold;">Graphic</span> <text:s text:c="" xmlns:text="http://openoffice.org/2000/text"/>in the list box, you can also link a background graphic. Try it the next time. You can then select whether you want the background graphic to be centered, anchored to a margin, or tiled.</p>
<p class="Head2"><help:key-word value="uploading homepages" tag="kw66057_4"/><help:key-word value="homepages; uploading" tag="kw66057_3"/>Uploading Homepage Files to Your ISP</p>
<p class="Paragraph">When you are satisfied with the way your homepage appears, you can upload all the files in your homepage directory to your Internet service provider. Ask your ISP about the exact procedure.</p>
<p class="Paragraph">If you want to quickly set up a homepage on the Internet with a few graphics, you don't even have to plan ahead:</p>
<ul class="L8">
<li class="">
<p style="">Open a new, empty page for your homepage (with <span style="font-weight:bold;">File - New - HTML Document</span>).</p>
</li>
<li class="">
<p style="">Write and format the text, integrate any pictures (whether as a link or directly embedded, by either using the <span style="font-weight:bold;">Insert - Graphics</span> dialog or via Drag&Drop from the Gallery).</p>
</li>
<li class="">
<p style="">Save the document locally. The graphic links will appear in the HTML source code, if you want to check it, but you do not have to be concerned about it.</p>
</li>
<li class="">
<p style="">Open the <help:link Id="66282"><span style="font-weight:bold;">Tools - Options - Load/Save - HTML compatibility</span></help:link> tab and ensure that the field <span style="font-weight:bold;">Copy local graphics to Internet</span> has been marked.</p>
</li>
<li class="">
<p style="">You can create links to the Internet.</p>
</li>
<li class="">
<p style="">Save the page using <span style="font-weight:bold;"><text:s text:c="" xmlns:text="http://openoffice.org/2000/text"/>File - Save As....</span>. Enter the full URL of your homepage at your ISP in the <span style="font-weight:bold;">File Name</span> field. e.g. http://homepages.provider.com/myname/index.htm.</p>
</li>
</ul>
<p class="Paragraph"><help:productname>%PRODUCTNAME</help:productname> now automatically converts all linked and embedded graphics on the page into GIF format. The graphics are assigned new understandable names. Links to these graphics will be integrated into the HTML document as <IMG SRC="abc123.gif"> with the relative path. Then the HTML pages and all graphics will be uploaded to the specified directory.</p>